<!-- 打印发货单 -->
<template>
    <!-- 添加或修改盘点计划对话框 -->
    <el-dialog :title="title" v-if="open" v-model="open" width="1100px" append-to-body class="print_shipping">
        <div class="order_item" shadow="never" v-for="(item, index) in orders" :key="index">
            <div slot="header">
                <div class="table_title">订单信息</div>
            </div>

            <el-table :data="dataSource1" border style="border-bottom: none: !important;;">
                <el-table-column align="center" prop="no" label="货号"></el-table-column>
                <el-table-column align="left" prop="flo" label="商品名称"></el-table-column>
                <el-table-column align="center" prop="phone" label="价格"></el-table-column>
                <el-table-column align="center" prop="payType" label="属性"></el-table-column>
                <el-table-column align="center" prop="source" label="数量"></el-table-column>
                <el-table-column align="center" prop="source" label="小计"></el-table-column>
            </el-table>
            <div class="count_detail">
                <span>商品总价： ¥200.00</span>
                <span>运费： ¥10.00</span>
                <span>订单总金额：¥210.00</span>
                <span>支付方式：支付宝</span>
            </div>
            <div class="order_info">
                <div class="info_item">
                    <div>手机号码：18000000000</div>
                    <div>订单编号：201707196398345</div>
                </div>
                <div class="info_item">
                    <div>提交时间：2017-07-19 15:43:23</div>
                    <div>收货地址： 广东省深圳市南山区科兴科学园</div>
                </div>
                <div class="info_item"></div>
                <div class="info_item">
                    <canvas :id="'barCode_' + index" class="barcode"></canvas>
                </div>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import modelMixin from '@/mixins/modelMixin'
export default {
    name: "printShipping",
    mixins: [modelMixin],
    data() {
        return {
            open: false,
            title: "打印发货单",
            orders: [{}, {}],
            dataSource1: [
                {
                    no: '123456',
                    flo: '商品名称',
                    phone: '100',
                    payType: '属性',
                    source: '数量',
                    source: '小计',
                },
                {
                    no: '123456',
                    flo: '商品名称',
                    phone: '100',
                    payType: '属性',
                    source: '数量',
                    source: '小计',
                },

            ],
            loading: false,

        }
    },
    created() {
    },
    methods: {
        show() {
            this.open = true;
        },
        cancel() {
            this.open = false;
        },
        categoryChange(value) {
            this.form.categoryId = value;
        }
    }
}
</script>

<style lang="scss" scoped>
.order_item {
    margin-bottom: 20px;
}

.table_title {
    padding: 10px;
    font-size: 16px;
    text-align: center;
    background-color: #f5f7fa;
    border: 1px solid #ebeef5;
    border-bottom: none;
}

.count_detail {
    padding: 10px;
    background-color: #f5f7fa;
    border: 1px solid #ebeef5;
    border-top: none;
    text-align: right;
}

.order_info {
    padding: 20px;
    background-color: #f5f7fa;
    border: 1px solid #ebeef5;
    border-top: none;
    display: grid;
    grid-template-columns: 250px 300px auto 300px;
    grid-gap: 20px;

    .info_item {
        div {
            margin-bottom: 10px;
        }
    }
}

.barcode {
    border: 1px solid red;
    width: 100%;
    height: 50px;

}
</style>

<style type="text/css">
.print_shipping .el-card__header {
    background-color: #f5f7fa;
}
</style>